<template>
	<view class="page">
		<view class="bg-white">
			<navigator url="/pages/mine/cert" class="weui-media-box weui-media-box_appmsg weui-cell_access" v-if="userInfo">
				<div class="weui-media-box__hd weui-avatar-circle headView">
					<open-data type="userAvatarUrl" class="icon"></open-data>
					<view class="icon"></view>
					<!-- <span class="weui-icon-success"></span> -->
				</div>
				<div class="weui-media-box__bd">
					<h4 class="weui-media-box__title">
						<open-data type="userNickName"></open-data>
					</h4>
					<span class="cert-block">点击认证</span>
				</div>
				<div class="weui-cell__ft f14">
				</div>
			</navigator>
			<view class="weui-media-box weui-media-box_appmsg weui-cell_access" v-else>
				<div class="weui-media-box__hd weui-avatar-circle ">
					<img class="weui-media-box__thumb sc-my-img" src="/static/head-default.png" alt="">
				</div>
				<div class="weui-media-box__bd">
					<button open-type="getUserInfo" type="warn" plain="true" class="mini-btn sc-small " size="mini" style="margin-top: 5upx;"
					 @getuserinfo="loginWX">点击登录</button>
				</div>
			</view>

			<view class="f-gray margin30-l u-f ">您还没有填写个性签名 <a href="" class="f-gray"> <text class="icon icon-liuyan1 margin10-l"></text></a></view>
			<!-- 数据 -->
			<view class="home-data u-f-ac">
				<view class="u-f1 u-f-ajc u-f-column">
					<view>20</view>关注
				</view>
				<view class="u-f1 u-f-ajc u-f-column">
					<view>10</view>粉丝
				</view>
				<view class="u-f1 u-f-ajc u-f-column">
					<view>55</view>名片
				</view>
				<view class="u-f1 u-f-ajc u-f-column">
					<view>22</view>收藏
				</view>
			</view>

		</view>
		<!-- 功能列表 -->
		<div class="weui-cells_form  margin10-t">
			<div class=" weui-cells  sc-cells">
				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p><text class="icon icon-xiaoxi sc-c1"></text>我的消息</p>
					</div>
					<div class="weui-cell__ft f14">
					</div>
				</a>

				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p><text class="icon icon-zuzhi sc-c4"></text>我的组织</p>
					</div>
					<div class="weui-cell__ft f14">
						加入0个组织</div>
				</a>

				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p><text class="icon icon-qizhi sc-c5"></text>我的活动</p>
					</div>
					<div class="weui-cell__ft f14">
						参与0个活动</div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p><text class="icon icon-toupiao sc-c6"></text>我的投票</p>
					</div>
					<div class="weui-cell__ft f14">
					</div>
				</a>
				<a class="weui-cell weui-cell_access" href="javascript:;">
					<div class="weui-cell__bd">
						<p><text class="icon icon-iconfontxiangce sc-c7"></text>我的相册</p>
					</div>
					<div class="weui-cell__ft f14">
					</div>
				</a>
				<view class="weui-cell weui-cell_access" @click="goToItem(6)">
					<div class="weui-cell__bd">
						<p><text class="icon icon-c-apply sc-c8"></text>我的留言</p>
					</div>
					<div class="weui-cell__ft f14">
					</div>
				</view>
			</div>
		</div>
		<div class="weui-footer margin10-t">
			<p class="weui-footer__text">青挚校友</p>
		</div>
		<!-- <tab-bar :current="4"></tab-bar> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// import tabBar from '../../components/tabBar.vue';
	export default {
		data() {
			return {

			}
		},
		components: {
			// tabBar
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			loginWX({
				detail
			}) {
				let _self = this;
				let userInfo = detail.userInfo;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						userInfo.code = loginRes.code
						_self.$post(_self.$api.login, userInfo).then(res => {
							if (res.code == 0) {
								_self.login(res.loginInfo);
							} else {
								uni.showModal({
									title: '操作提示',
									content: res.msg,
									showCancel: false
								})
							}
						});
					}
				});
			},
			goToItem(itemIndex) {
				switch (itemIndex) {
					case 6:
						uni.navigateTo({
							url: '/pages/org/msg/my-msg'
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	.page {
		background: #f7f7f7;
	}

	.cert-block {
		padding: 10rpx;
		margin: 20rpx 0;
		color: #ed1941;
		font-size: 20rpx;
		border: 1rpx solid #ed1941;
		border-radius: 10rpx;
	}

	.sc-small {
		display: inline-block;
		line-height: 1.8;
		/* font-size: 24upx; */
		padding: 0em 0.5em !important;
	}

	.home-data {
		padding: 20upx 40upx;
	}

	.home-data>view {
		color: #989898;
	}

	.home-data>view>view {
		font-size: 32upx;
		color: #333333;
	}

	.sc-my-img {
		width: 120upx;
		height: 120upx;
		max-height: 120upx;
		border-radius: 50%;
	}

	.sc-cells .icon {
		font-size: 40upx;
		margin-right: 10upx;
		width: 55upx;
		display: inline-block;
	}

	.sc-c1 {
		color: #FBB634;
	}

	.sc-c2 {
		color: #219AF5;
	}

	.sc-c3 {
		color: #4993FE;
	}

	.sc-c4 {
		color: #6991F0;
	}

	.sc-c5 {
		color: #29CB9A;
	}

	.sc-c6 {
		color: #1ACDBA;
	}

	.sc-c7 {
		color: #4DC6F1;
	}

	.sc-c8 {
		color: #F86868;
	}

	.margin30-l {
		margin-left: 60upx;
	}

	.sc-renzheng {
		position: fixed;
		bottom: 30upx;
		right: 20upx;
		z-index: 999;
	}

	.sc-renzheng a {
		border-radius: 50upx;
		font-weight: normal;
		font-size: 28upx;
	}

	.sc-renzheng a .icon {
		margin-right: 10upx;
	}

	.headView {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		width: 120rpx;
		position: relative;
	}

	/**	
	*open-data 的头像做不了圆角	
	*这里是覆盖一个镂空的view在上面 镂空view的边界做成与周围背景颜色一样 做了伪圆角	
	**/

	.headView .icon {
		position: absolute;
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		border: 30rpx solid #ffffff;
	}
</style>
